<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<fieldset style="position: absolute; left: 50%; width: 630px; border: 1px solid black; box-shadow: 3px 3px 6px black; margin-left: -315px">
    <legend style="font: 700 18px/21px 微软雅黑; letter-spacing: 3px">用户编辑</legend>
    <!-- 图片如果没有东西，显示默认图片，这里使用EL的concat方法，user是用户实体类，pic是头像属性 -->
    <img src="${user.pic==null?"/upload/noPic.png":"/upload/testSpringMVC/".concat(user.pic)}" style="box-shadow: 1px 1px 3px gray; display: block; width: 256px; max-height: 256px" /></div>
    <input type="file" name="uploadFile" accept="image/*"  multiple="multiple" />
</fieldset>

</body>
    <script>
        var fn="";//全局变量，存放重复上传时的上次成功文件名，重新上传从服务器删除掉原来上传的文件
        $("input[name='uploadFile']").change(function(e){
            var data=new FormData();//创建表单对象
            //表单对象封装数据，当前选择器元素集合的第一个，选中的第一个文件（PS文件组件支持多选，服务端按文件数组处理，这里我们只处理单文件）
            data.append("file",$(this)[0].files[0]);
            //如果是重复上传头像，将上次成功上传的文件名一并传回，服务端可以删除旧文件，当然还有别的技术可以处理，但业务流程相同
            data.append("fname",fn);        
            $.ajax({
                type:"post",
                url:"${pageContext.servletContext.contextPath}/tools/uploadFile.action",
                data:data,
                processData:false,
                contentType:false,
                success:function(data){
                    if(data.saveFile!=null){
                        //saveFile是springMVC回传的json数据保存的文件名，同时保存的全局变量fn
                        fn=data.saveFile;
                        //改变页面图片显示，偷懒样式表写一起了
                        $("#imageFile").html(
                            "<img src='/upload/testSpringMVC/"+fn+"' style='box-shadow: 1px 1px 3px gray; display: block; width: 256px; max-height: 256px' />"  );}
                }
            });
        });
    </script>
</html>